<!--
鼠标不断移动,使用鼠标移动事件:mousemove
在页面中移动:给document注册事件
图片要移动距离,而且不占位置,使用绝对定位
核心原理:每次鼠标移动,我们都会获得最新的坐标,把这个坐标作为图片的left和top
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>



<body>
<img src="img/1.png" alt="">
<script>
    document.addEventListener('mousemove', function (e) {
        //鼠标只要移动,就会触发事件
        var x = e.pageX;
        var y = e.pageY;
        var pic = document.querySelector('img');
        pic.style.left = x-80+'px';
        pic.style.top = y-120+'px';
    })
</script>
</body>
</html>
